<nz-drawer
  (nzOnClose)="handleClose()"
  [nzClosable]="true"
  [nzTitle]="title"
  [nzVisible]="show"
  [nzPlacement]="'right'"
  (nzVisibleChange)="onVisibilityChange($event)"
>
  <ng-container *nzDrawerContent>
    <nz-spin [nzSpinning]="isLoading()">
      <nz-alert *ngIf="isMember" class="mb-3" [nzType]="'warning'"
                [nzMessage]="'成员没有权限更改设置。'"></nz-alert>

      <form [formGroup]="form" [nzLayout]="'vertical'" nz-form>

        <nz-form-item>
          <nz-form-label [nzSpan]="null" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSpan]="null" nzErrorTip="请输入名称！">
            <input #projectName [formControlName]="'name'" nz-input placeholder="名称"/>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item *ngIf="projectId">
          <nz-form-label [nzSpan]="null" nzRequired>项目编号</nz-form-label>
          <nz-form-control [nzSpan]="null">
            <input [formControlName]="'key'" [maxlength]="5" (keyup)="onKeyChange()" nz-input
                   placeholder="项目编号"/>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label class="pb-0" [nzSpan]="null" nzRequired>项目颜色
            <nz-tag [nzColor]="activeColorCode" nz-dropdown [nzDropdownMenu]="menu" [nzDisabled]="isMember"
                    [nzTrigger]="'click'"
                    class="ms-2 rounded-circle cursor-pointer"
                    style="width: 20px;height: 20px;">&nbsp;
            </nz-tag>
          </nz-form-label>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul style="max-height: 200px;overflow: hidden;overflow-y: auto;" nz-menu nzSelectable>
              <li nz-menu-item *ngFor="let item of COLOR_CODES" (click)="setColorCode(item)">
                <nz-tag
                  [nzColor]="item"
                  class="me-1 w-100 rounded-pill"
                  style="height: 16px !important;width: 16px !important;">&nbsp;
                </nz-tag>
              </li>
            </ul>
          </nz-dropdown-menu>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="null">状态</nz-form-label>
          <nz-form-control [nzSpan]="null">
            <nz-select [formControlName]="'status_id'" [nzLoading]="loadingProjStatuses">
              <nz-option *ngFor="let item of statuses" [nzLabel]="item.name | safeString" [nzValue]="item.id"
                         nzCustomContent>
                <span nz-icon [nzType]="item.icon | safeString" [style.color]="item.color_code"></span>
                {{item.name}}
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="null">健康</nz-form-label>
          <nz-form-control [nzSpan]="null">
            <nz-select [formControlName]="'health_id'" [nzLoading]="loadingProjHealths">
              <nz-option *ngFor="let item of healths" [nzLabel]="item.name | safeString" [nzValue]="item.id"
                         nzCustomContent>
                <nz-badge [nzColor]="item.color_code+'69'" [nzText]="item.name"></nz-badge>
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <worklenz-project-categories-autocomplete
          [(categoryId)]="categoryId"
          [disabled]="isMember"
        ></worklenz-project-categories-autocomplete>

        <nz-form-item>
          <nz-form-label [nzSpan]="null">备注</nz-form-label>
          <nz-form-control [nzSpan]="null">
            <textarea [formControlName]="'notes'" nz-input placeholder="备注"></textarea>
          </nz-form-control>
        </nz-form-item>

        <worklenz-clients-autocomplete
          *ngIf="!isMember && (!edit || !loading)"
          [name]="clientName"
          (nameChange)="onNameChangeSubmit($event)"
        ></worklenz-clients-autocomplete>

        <nz-form-item>
          <nz-form-label [nzSpan]="null">
            项目经理
            <div (nzVisibleChange)="handleOwnerVisibleChange($event)" [nzClickHide]="false"
              [nzDropdownMenu]="projectManagerDropDown"
              [nzTrigger]="'click'" [nzDisabled]="isMember || (!isOwnerOrAdmin() && isProjectManager())"  nz-dropdown>
              <div class="d-flex h-100 align-items-center manager-input" #projectManagerSelector>
                <ng-container *ngIf="projectManager">
                  <nz-avatar
                    [nzSize]="24"
                    [nzSrc]="projectManager.avatar_url"
                    [nzText]="projectManager.name | firstCharUpper"
                    [nzTooltipPlacement]="'top'"
                    [nzTooltipTitle]="projectManager.name"
                    [style.background-color]="projectManager.avatar_url ? '#ececec' : projectManager.color_code"
                    class="mt-auto mb-auto mx-2"
                    nz-tooltip></nz-avatar>
                  <span nz-typography>{{projectManager.name}}</span>
                  <span class="mx-2 remove-icon" (click)="handleMemberChange(null)" nz-typography>
                    <span nz-icon nzType="close-circle" nzTheme="fill"></span>
                  </span>
                </ng-container>
                <span *ngIf="!projectManager" nz-typography nzType="secondary">
                  <nz-avatar [nzSize]="26" class="avatar-dashed mx-2 bg-white" [nzIcon]="'plus'"></nz-avatar>
                </span>
              </div>

              <nz-dropdown-menu #projectManagerDropDown="nzDropdownMenu">
                <ul *ngIf="teamMembers.length" class="members-dropdown pt-0"
                    nz-menu>
                  <li class="px-3 py-2 position-sticky top-0 bg-white z-top">
                    <input class="border-default-color dropdown-search-input"
                           nz-input placeholder="按名称搜索" type="text"
                           (input)="getTeamMembers()"
                           #memberSearchInput>
                  </li>
                  <li *ngFor="let item of teamMembers | searchByName: searchingName; trackBy: trackById"
                      [nzDisabled]="item.pending_invitation"
                      (click)="handleMemberChange(item)"
                      class="m-0"
                      nz-menu-item>
                    <div class="d-flex align-items-center justify-content-center user-select-none">
                      <nz-avatar
                        [nzSize]="24"
                        [nzSrc]="item.avatar_url"
                        [nzText]="item.name | firstCharUpper"
                        [nzTooltipPlacement]="'top'"
                        [nzTooltipTitle]="item.name"
                        [style.background-color]="item.avatar_url ? '#ececec' : item.color_code"
                        class="mt-auto mb-auto me-2"
                        nz-tooltip></nz-avatar>
                      <div style="line-height: 15px;">
                        <span class="d-block mem-name" nz-typography>{{item.name}}</span>
                        <small nz-typography nzType="secondary">
                          {{item.email}} <small *ngIf="item.pending_invitation" nz-typography nzType="danger">(邀请待定)</small>
                        </small>
                      </div>
                    </div>
                  </li>
                </ul>
              </nz-dropdown-menu>
            </div>
          </nz-form-label>
        </nz-form-item>

        <div #outsideClicker></div>

        <nz-input-group [nzSize]="'default'">
          <div nz-row [nzGutter]="8">
            <div nz-col [nzSpan]="12">
              <nz-form-item>
                <nz-form-label [nzSpan]="null">开始日期</nz-form-label>
                <nz-form-control [nzSpan]="null">
                  <nz-date-picker
                    [formControlName]="'start_date'" [nzDisabledDate]="utils.checkForMaxDate(endDate)"
                    class="w-100" (nzOnOpenChange)="calculateManDays()"></nz-date-picker>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="12">
              <nz-form-item>
                <nz-form-label [nzSpan]="null">结束日期</nz-form-label>
                <nz-form-control [nzSpan]="null">
                  <nz-date-picker
                    [formControlName]="'end_date'"
                    [nzDisabledDate]="utils.checkForMinDate(startDate)"
                    class="w-100" (nzOnOpenChange)="calculateManDays()"></nz-date-picker>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="24">
              <nz-form-item>
                <nz-form-label [nzSpan]="null" nzRequired class="star-none">预计工作天数</nz-form-label>
                <nz-form-control [nzSpan]="null" nzErrorTip="字段不能为空！">
                  <nz-input-number [formControlName]="'working_days'" [nzMin]="0" [maxlength]="5" nz-input
                                   placeholder="预计工作天数" class="w-100"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="24">
              <nz-form-item>
                <nz-form-label [nzSpan]="null" nzRequired class="star-none">预计人天数</nz-form-label>
                <nz-form-control [nzSpan]="null" nzErrorTip="字段不能为空！">
                  <nz-input-number [formControlName]="'man_days'" [nzMin]="0" [maxlength]="10" nz-input
                                   placeholder="预计人天数" class="w-100"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="24">
              <nz-form-item>
                <nz-form-label [nzSpan]="null" nzRequired class="star-none">每天小时数</nz-form-label>
                <nz-form-control [nzSpan]="null" nzErrorTip="字段不能为空！">
                  <nz-input-number [formControlName]="'hours_per_day'" [nzMin]="0" [nzMax]="24" [maxlength]="2" nz-input
                                   placeholder="每天小时数" class="w-100"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
          </div>
        </nz-input-group>

        <ng-container *ngIf="!isMember">
          <button [nzLoading]="updatingProject" nz-button nzBlock [nzType]="'primary'"
                  (click)="submit()"
                  type="button">{{submitButtonText}}</button>
          <button (nzOnConfirm)="delete()" *ngIf="projectId" [nzLoading]="deletingProject" class="mt-2"
                  nz-button nz-popconfirm nzDanger
                  nzBlock [nzOkText]="'确定'" [nzPopconfirmTitle]="'你确定吗？'" [nzType]="'dashed'" type="button">
            删除项目
          </button>
        </ng-container>
      </form>

      <ng-container *ngIf="projectId">
        <nz-divider class="mt-3 mb-2"></nz-divider>
        <div class="pb-1">
          <div *ngIf="model.created_at" class="mb-0" nz-typography
               nzType="secondary">
            <small nz-tooltip [nzTooltipPlacement]="'right'"
                   [nzTooltipTitle]="model.created_at | date: 'medium'">
              创建于 {{model.created_at | fromNow}} 由 {{model.project_owner}}
            </small>
          </div>
          <div *ngIf="model.updated_at" class="mb-0"
               nz-typography
               nzType="secondary">
            <small nz-tooltip [nzTooltipPlacement]="'right'"
                   [nzTooltipTitle]="model.updated_at | date: 'medium'">
              更新于 {{model.updated_at | fromNow}}
            </small>
          </div>
        </div>
      </ng-container>
    </nz-spin>
  </ng-container>
</nz-drawer>

<worklenz-team-members-form (onCreateOrUpdate)="getTeamMembers()"
                            [(show)]="showTeamMemberModal"></worklenz-team-members-form>
